<template>
  <div class="amap-page-container">
    <el-input v-model="searchKey" :disabled="permission==0" size="small" id="search" @focus="handleInit" @blur="handleShowErrMsg"></el-input>
    <div id="searchTip" class="map-search"></div>
    <el-amap class="map-content" ref="map" vid="amap" :zoom="zoom" :center='center' :amap-manager="amapManager">
    </el-amap>
  </div>
</template>

<script>
import Vue from 'vue'
import VueAMap from 'vue-amap'
import { AMapManager } from 'vue-amap'
import { lazyAMapApiLoaderInstance } from 'vue-amap'
Vue.use(VueAMap)
VueAMap.initAMapApiLoader({
  key: 'cd123dffa2a00e937178f9a549931ce4',
  v: '1.4.4',
  uiVersion: '1.0.11'
})
let amapManager = new AMapManager()
export default {
  data: function () {
    let vm = this
    return {
      zoom: 10,
      searchKey: '',
      amapManager,
      map: null,
      poiPicker: null,
      center: []
    }
  },
  props: ['latitude', 'longitude', 'positionMap', 'permission'], //禁用
  mounted () {
    this.center = [parseFloat(this.longitude), parseFloat(this.latitude)]
    if (this.longitude !== '116.481543') {
      this.searchKey = this.positionMap
      this.handleInitLook(parseFloat(this.longitude), parseFloat(this.latitude))
    } else {
    }
  },
  methods: {
    handleInitLook (lng, lat) {
      lazyAMapApiLoaderInstance.load().then(() => {
        let map = this.amapManager.getMap()
        AMapUI.loadUI(['overlay/SimpleMarker'], function (SimpleMarker) {
          let marker = new SimpleMarker({
            iconStyle: 'red',
            map: map,
            position: [lng, lat],
            draggable: false
          })
        })
      })
    },
    handleInit () {
      this.initSearch()
    },
    handleShowErrMsg () {
      if (!this.searchKey) {
        this.$emit('handleShowErrMsg', true)
      } else {
        this.$emit('handleShowErrMsg', false)
      }
    },
    initSearch () {
      let vm = this
      let map = this.amapManager.getMap()
      AMapUI.loadUI(
        ['misc/PoiPicker', 'overlay/SimpleMarker', 'misc/PositionPicker'],
        function (PoiPicker, SimpleMarker, PositionPicker) {
          // 根据输入框的值搜索
          let poiPicker = new PoiPicker({
            input: 'search', //输入框id
            placeSearchOptions: {
              map: map,
              pageSize: 10,
              type:
                '餐饮服务|购物服务|生活服务|体育休闲服务|医疗保健服务|住宿服务|风景名胜|商务住宅|政府机构及社会团体|科教文化服务|金融保险服务|公司企业|地名地址信息|公共设施'
            }, //地点搜索配置
            suggestContainer: 'searchTip', //输入提示显示DOM
            searchResultsContainer: 'searchTip' //搜索结果显示DOM
          })
          vm.poiPicker = poiPicker
          //监听poi选中信息
          poiPicker.on('poiPicked', function (poiResult) {
            let source = poiResult.source
            let poi = poiResult.item
            if (source !== 'search') {
              poiPicker.searchByKeyword(poi.name)
            } else {
              poiPicker.clearSearchResults()
              vm.searchKey = poi.name
              vm.center = [
                poiResult.item.location.lng,
                poiResult.item.location.lat
              ]
              let marker = new SimpleMarker({
                iconStyle: 'red',
                map: map,
                position: [
                  poiResult.item.location.lng,
                  poiResult.item.location.lat
                ],
                draggable: false
              })
              let positionData = {
                address: vm.searchKey,
                position: vm.center
              }
              vm.$emit('listenToChild', positionData)
            }
          })
        }
      )
    }
  }
}
</script>

<style>
.amap-page-container {
  width: 100%;
  height: 100%;
}
.map-search {
  width: 350px;
}
.map-content {
  margin-top: 20px;
}
</style>
